{% comment %}
    Renders a product media

    Accepts:
    - media: {Object} Product Media object
    - loop: {Boolean} If enable Product Video Media loop
    - custom_class: {String} Custom class of this element to styled media in different position.
    - custom_class: {String} Custom class of video.
    - auto_play: {Boolean} If enable mp4 Video autoplay, set true to fix bug in ios safari

    Usage:
    {% render 'product-deferred-media',
      loop: true
      media: media,
      custom_class: 'media-wrap'
      custom_video_class: 'w-100'
      auto_play: false
    %}
{% endcomment %}

<deferred-media data-type="video" class="deferred-media {{ custom_class }}">
  <template>
    {%- liquid
      case media.media_type
      when 'external_video'
        assign video_class = 'w-100 h-100 js-' | append: media.host
        if media.host == 'youtube'
          echo media | external_video_url: autoplay: false, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
        else
          echo media | external_video_url: autoplay: false, loop: loop | external_video_tag: class: video_class, loading: "lazy"
        endif
      when 'video'
        echo media | media_tag: image_size: "1024x", autoplay: auto_play, loop: loop, controls: true, preload: "none", class: custom_video_class
      endcase
    -%}
  </template>
</deferred-media>

{% comment %}
  本地视频的preload: "metadata"修复了safari上的一些播放问题
{% endcomment %}